<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1-通过样式来控制显示与隐藏
        // class App extends React.Component{
        //     state = {
        //         isShow:true
        //     }
        //     render(){
        //         return (
        //             <div>
        //                 <button onClick={()=>{
        //                     this.setState({
        //                         isShow:!this.state.isShow
        //                     })
        //                 }}>显示与隐藏</button>
        //                 <div style={{
        //                     width:300,
        //                     height:200,
        //                     background:"red",
        //                     display:this.state.isShow?"block":"none"
        //                 }}></div>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)
    }
    {
        // 2
        class App extends React.Component{
            state = {
                isShow:true
            }
            render(){
                return (
                    <div>
                        <button onClick={()=>{
                            this.setState({
                                isShow:!this.state.isShow
                            })
                        }}>显示与隐藏</button>
                        {
                            this.state.isShow && (
                                <div style={{
                                    width:300,
                                    height:200,
                                    background:"red"
                                }}></div>
                            )
                        }
                    </div>
                )
            }
        }
        root.render(<App/>)
    }
</script>
</html>